<template>
  <div class="content-in">
    <!-- 左侧 -->
    <div class="left-in">
      <a href="#">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        大模型子站
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2 aspan1"></span>
      </a>
      <div class="xiahuaxian2"></div>
      <RouterLink to="attention_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        关注
      </RouterLink>
      <RouterLink to="End_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        综合
      </RouterLink>
      <RouterLink to="OverAll_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        后端
      </RouterLink>
      <RouterLink to="Pre_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        前端
      </RouterLink>
      <RouterLink to="Android_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        Android
      </RouterLink>
      <RouterLink to="iOS_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        iOS
      </RouterLink>
      <RouterLink to="People_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        人工智能
      </RouterLink>
      <RouterLink to="DevTool_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        开发工具
      </RouterLink>
      <RouterLink to="CodeLive_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        代码人生
      </RouterLink>
      <RouterLink to="Read_Page">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        阅读
      </RouterLink>
      <a href="#">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        排行榜
      </a>
    </div>
    <!-- 中间 -->
    <div class="centent-in">
      <div class="centent-top">
        <a href="#" class="centent-topa1 chufaa">推荐</a>
        <a href="#" class="centent-topa2">最新</a>
      </div>
      <div class="centent-neirong">

        <RouterView />
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right-in">
      <div class="xiawuhao">
        <div>
          <h4>下午好！</h4>
          <span>点亮在社区的每一天</span>
        </div>
        <div>
          <button>去签到</button>
        </div>
      </div>
      <div class="wenzhangbang">
        <div class="wenzhangbang-title">
          <img src="../assets/images/image.png" alt="">
          <span>文章榜</span>
          <a href="#" @click="switchArticle">
            <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
            换一换
          </a>
        </div>
        <div class="xiahuaxian"></div>
        <div class="wenzhangbangneirong">
          <div v-for="item in currentArticles" :key="item.id">
            <span>{{ item.id }}</span>
            <a href="#"><span>{{ item.title }}</span></a>
          </div>
          <!-- <div><span>1</span><a href="#"><span>卧槽，牛逼！vue3的组件竟然还能</span></a></div>
          <div><span>2</span><a href="#"><span>VSCode 天命人：边打代码边</span></a></div>
          <div><span>3</span><a href="#"><span>高德地图+Three.js实现飞线</span></a></div>
          <div><span>4</span><a href="#"><span> weapp-vite 发布：重塑小程序开</span></a></div>
          <div><span>5</span><a href="#"><span>用 Swift 写 Android App ？</span></a></div> -->
        </div>
        <div class="xiahuaxian"></div>
        <div class="chakangengduo">
          <a href="#">
            <span>查看更多</span>
            <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
          </a>
        </div>
      </div>
      <div class="wenzhangimg">
        <div class="right-img">
          <a href="#" title="关闭"> <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span></a>
          <a href="#"><img src="../assets/images/youjiangzhengwen.png" alt=""></a>
          <a href="#"><span class="span123">广告</span></a>

        </div>
        <div class="right-img">
          <a href="#" title="关闭"> <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span></a>
          <a href="#"><img src="../assets/images/youjiangzhengwen.png" alt=""></a>
          <a href="#"><span class="span123">广告</span></a>
        </div>
        <div class="right-img">
          <a href="#" title="关闭"> <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span></a>
          <a href="#"><img src="../assets/images/youjiangzhengwen.png" alt=""></a>
          <a href="#"><span class="span123">广告</span></a>
        </div>
      </div>
      <div class="zuozhebang">
        <div class="zuozhebang-title">
          <img src="../assets/images/zuozhebang.png" alt="">
          <span>作者榜</span>
        </div>
        <div class="xiahuaxian"></div>
        <div class="zuozhebang-zuozhe">
          <div class="zuozhebang-div1">
            <a href="#">
              <img src="../assets/images/zuozhe1.png" alt="" title="知否技术">
            </a>
            <a href="#">
              <div class="zuozhebang-div2" title="知否技术">
                <span class="zuozhebang-div2-span1">知否技术</span>
                <span class="zuozhebang-div2-span2">公众号 @知否技术</span>
              </div>
            </a>
            <span class="button-span">+ 关注</span>
          </div>
          <div class="zuozhebang-div1">
            <a href="#">
              <img src="../assets/images/zuozhe1.png" alt="" title="知否技术">
            </a>
            <a href="#">
              <div class="zuozhebang-div2" title="知否技术">
                <span class="zuozhebang-div2-span1">知否技术</span>
                <span class="zuozhebang-div2-span2">公众号 @知否技术</span>
              </div>
            </a>
            <span class="button-span">+ 关注</span>
          </div>
          <div class="zuozhebang-div1">
            <a href="#">
              <img src="../assets/images/zuozhe1.png" alt="" title="知否技术">
            </a>
            <a href="#">
              <div class="zuozhebang-div2" title="知否技术">
                <span class="zuozhebang-div2-span1">知否技术</span>
                <span class="zuozhebang-div2-span2">公众号 @知否技术</span>
              </div>
            </a>
            <span class="button-span">+ 关注</span>
          </div>
          <div class="zuozhebang-div1">
            <a href="#">
              <img src="../assets/images/zuozhe1.png" alt="" title="知否技术">
            </a>
            <a href="#">
              <div class="zuozhebang-div2" title="知否技术">
                <span class="zuozhebang-div2-span1">知否技术</span>
                <span class="zuozhebang-div2-span2">公众号 @知否技术</span>
              </div>
            </a>
            <span class="button-span">+ 关注</span>
          </div>
          <div class="zuozhebang-div1">
            <a href="#">
              <img src="../assets/images/zuozhe1.png" alt="" title="知否技术">
            </a>
            <a href="#">
              <div class="zuozhebang-div2" title="知否技术">
                <span class="zuozhebang-div2-span1">知否技术</span>
                <span class="zuozhebang-div2-span2">公众号 @知否技术</span>
              </div>
            </a>
            <span class="button-span">+ 关注</span>
          </div>
        </div>
        <div class="xiahuaxian"></div>
        <div class="chakangengduo">
          <a href="#">
            <span>查看更多</span>
            <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
          </a>
        </div>
      </div>
      <div class="tuijianneirong">
        <div class="tuijianneirong-title">
          <span>推荐话题</span>
          <a href="#">
            <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
            换一换
          </a>
        </div>
        <div class="xiahuaxian"></div>
        <div class="tuijianneirongneirong">
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#挑战每日一条沸点#</span>
              <span class="tuijianneirong-div1-span2">9.4m</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#每日快讯#</span>
              <span class="tuijianneirong-div1-span2">6.3m</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#豆包Marscode体验#</span>
              <span class="tuijianneirong-div1-span2">478k</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#鸿蒙的实践与探索#</span>
              <span class="tuijianneirong-div1-span2">110k</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#每天一个知识点#</span>
              <span class="tuijianneirong-div1-span2">23.7m</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#金石计划征文活动#</span>
              <span class="tuijianneirong-div1-span2">22.0m</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#华为鸿蒙有奖征文#</span>
              <span class="tuijianneirong-div1-span2">83k</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#新人报道#</span>
              <span class="tuijianneirong-div1-span2">16.7m</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#创作者训练营#</span>
              <span class="tuijianneirong-div1-span2">4.7m</span>
            </a>
          </div>
          <div class="tuijianneirong-div1">
            <a href="#">
              <img src="../assets/images/jian.png" alt="">
              <span class="tuijianneirong-div1-span1">#我的技术写作成长之路#</span>
              <span class="tuijianneirong-div1-span2">4.9m</span>
            </a>
          </div>
        </div>
        <div class="xiahuaxian"></div>
        <div class="chakangengduo">
          <a href="#">
            <span>查看更多</span>
            <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
          </a>
        </div>
      </div>
      <div class="banquan">
        <ul>
          <li>
            <a href="#">用户协议</a>
            <a href="#">营业执照</a>
            <a href="#">隐私政策</a>
            <a href="#">关于我们</a>
          </li>
          <li>
            <a href="#">使用指南</a>
            <a href="#">友情链接</a>
            <a href="#">更多文章</a>
          </li>
          <li> <span>举报邮箱:</span><a href="#">feedback@xitu.io</a></li>
          <li> <span>座机电话:</span><a href="#">010-83434395</a></li>
          <li><a href="#">京ICP备：18012699号-3</a></li>
          <li><a href="#">京ICP证：京B2-20191272</a></li>
          <li><a href="#"><img src="../assets/images/beian.png" alt="">京公网安备11010802026719号</a></li>
          <li><span>©2024 稀土掘金</span></li>
        </ul>
      </div>
    </div>
    <!-- 右侧下边三点 -->
    <div class="youxia-div">
      <div class="youxia-out1 youxia-out">
        <button class="youxia1 youxia">
          <span class="iconfont icon-mtiIcon-caozuo-xiangyou2">
          </span>
        </button>
      </div>
      <div class="youxia-out2 youxia-out">
        <button class="youxia2 youxia">
          <span class="iconfont icon-mtiIcon-caozuo-xiangyou2">
          </span>
        </button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router'

const currentArticleIndex = ref(0)
const articleList = ref([
  [
    { id: 1, title: '卧槽，牛逼！vue3的组件竟然还能' },
    { id: 2, title: 'VSCode 天命人：边打代码边' },
    { id: 3, title: '高德地图+Three.js实现飞线' },
    { id: 4, title: 'weapp-vite 发布：重塑小程序开' },
    { id: 5, title: '用 Swift 写 Android App ？' },
  ],
  [
    { id: 1, title: '22222222222222222222' },
    { id: 2, title: '22222222222222222222' },
    { id: 3, title: '22222222222222222222' },
    { id: 4, title: '22222222222222222222' },
    { id: 5, title: '22222222222222222222' },
  ],
  // 更多文章列表
])

const currentArticles = computed(() => {
  return articleList.value[currentArticleIndex.value]
})

const switchArticle = () => {
  currentArticleIndex.value = (currentArticleIndex.value + 1) % articleList.value.length
}

</script>

<style lang="css" scoped>
@import '../assets/reset1.css';
@import '../assets/index.css';
@import '../assets/iconfont/iconfont.css';
</style>
